/**
 * @author: jever
 * @date: 2019/3/6
 * @description:  avatar-selector.js
 */
import React from 'react';
import {Grid, List} from "antd-mobile";
import PropTypes from 'prop-types'

class AvatarSelector extends React.Component{
    static propTypes = {
        selectAvatar: PropTypes.func.isRequired
    }
    constructor(props) {
        super(props)
        this.state = {

        }
    }
    render() {
        const avatarList = 'avatar (1),avatar (2),avatar (3),avatar (4),avatar (5),avatar (6),avatar (7),avatar (8),avatar (9),avatar (10),avatar (11),avatar (12),avatar (13)'
            .split(',')
            .map(v => ({
                icon: require(  `../image/${v}.jpg`),
                text: v
            }))
        const gridHeader = this.state.icon
            ? (<div>
                <span>已选择头像</span>
                <img style={{width:20}} src={this.state.icon} alt=""/>
            </div>)
            : (<div>'请选择头像‘</div>)
        return (
            <div>
                <List renderHeader={()=>gridHeader}>
                    <Grid
                        data={avatarList}
                        columnNum={5}
                        onClick={elm => {
                            this.setState(elm)
                            this.props.selectAvatar(elm.text)
                        }}
                    >

                    </Grid>
                </List>
            </div>
        )
    }
}

export default AvatarSelector